<template>
  <el-dialog :title="title+'用户'"
            :visible.sync="isShow"
            width="45%"
            @close="cancel">
  <el-form ref="formRef" :rules="formRules" :model="formData" class="info-form"  label-width="110px">
      <el-row>
         <el-col :span="12">
          <el-form-item label="用户名"
                        prop="username">
            <el-input size="medium" v-model="formData.username"
                      placeholder="请输入用户名名称"></el-input>
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="手机号"
                        prop="mobile">
            <el-input size="medium" v-model="formData.mobile"
                      placeholder="请输入手机号名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码"
                        :prop="isAdd ? 'password':'' ">
            <el-input size="medium" v-model="formData.password"
                      :placeholder="isAdd ? '请输入密码名称':'留空表示不修改'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别"
                        prop="sex">
            <el-switch v-model="formData.sex"
                         active-text="男"
                         inactive-text="女"
                         :active-value="0"
                         :inactive-value="1">
              </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户头像"
                        prop="icon">
              <image-upload v-model="formData.icon" field-name="file" :limit="1" :upload-fn="uploadFile"></image-upload>
          </el-form-item>
        </el-col>

      </el-row>
  </el-form>
  <div slot="footer">
    <el-button @click="cancel"
                size="small">取消</el-button>
    <el-button type="primary"
                size="small"
                @click="submit">确定</el-button>
  </div>
</el-dialog>
</template>
<script>
import { addData, updateData, getInfoData } from '@/api/user/user'
import { uploadFile } from '@/api'
const formRules = {
  mobile: [{ required: true, message: '手机号类型必须！', trigger: 'blur' }],
  password: [{ required: true, message: '密码类型必须！', trigger: 'blur' }],
  sex: [{ required: true, message: '性别类型必须！', trigger: 'blur' }],
  username: [{ required: true, message: '用户名类型必须！', trigger: 'blur' }]
}
const defaultItem = {
  icon: '', // 用户头像
  mobile: '', // 手机号
  password: '', // 密码
  sex: 0, // 性别
  username: '' // 用户名
}
export default {
  name: 'userInfo',
  data () {
    return {
      isShow: false,
      isAdd: true,
      formData: { ...defaultItem },
      formRules
    }
  },
  computed: {
    title () {
      return this.isAdd ? '添加' : '修改'
    }
  },
  methods: {
    uploadFile,
    //  获取单行信息回显
    async getInfo (id) {
      this.formData = await getInfoData(id)
      this.isAdd = false
      this.isShow = true
    },
    //  增加或更新提交
    async submit () {
      //  验证
      try {
        await this.$refs.formRef.validate()
      } catch (error) {
        return this.$message.warning('验证失败')
      }
      //  提交
      if (this.isAdd) {
        await addData(this.formData)
        this.$message.success('添加成功')
      } else {
        await updateData(this.formData)
        this.$message.success('修改成功')
      }
      // 更新列表
      this.$emit('update-list')
      // 关闭
      this.cancel()
    },
    cancel () {
      this.isShow = false
      this.isAdd = true
      this.formData = { ...defaultItem }
      this.$refs.formRef.clearValidate()
    }
  }
}
</script>
<style scoped></style>
